<template>
  <div class="base">
    <canvas id="webgl"></canvas>

    <div class="color_pannel">
      <div class="color_item" v-for="item, index in colorList" :key="index">
        <div class="color_block" :style="{ background: item.color }" @click="closeLine(item.color)"></div>
        <div class="color_name">{{ item.name }}</div>
      </div>
    </div>

    <div class="color_station_pannel">
      <div class="color_item" v-for="item, index in stationColorList" :key="index">
        <div class="color_block" :style="{ background: item.color }" @click="closeStation(item.color)"></div>
        <div class="color_name">{{ item.name }}</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from "vue";
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
import utils from "@/utils";
import Experience from './class/Experience'
import Data from "./data";

const colorList = Data.lineColorRange();
const closeLine = (color) => {
  console.log(experience.value.group.map.lineGroup);
  const lines = experience.value.group.map.lineGroup.children;
  const flys = experience.value.group.map.flyGroup.children
  lines.forEach(line => {
    if (line.color === color) {
      line.visible = !line.visible;
    }
  });
  flys.forEach(line => {
    if (line.color === color) {
      line.visible = !line.visible;
    }
  });
}

const stationColorList = Data.stationColorList();
const closeStation = (color) => {
  console.log(experience.value.group.map.markGroup);
  const marks = experience.value.group.map.markGroup.children;
  marks.forEach(mark => {
    if (mark.stationColor && mark.stationColor === color) {
      mark.visible = !mark.visible
    }
  })
  // experience.value.group.map.lineGroup.children.forEach(line => {
  //   if(line.color === color ){
  //     line.visible = !line.visible;
  //   }
  // });
}
const experience = ref()
onMounted(() => {
  // 特别说明 窗口尺寸改变的时候Webgl元素的长宽不会变化
  // 渲染的尺寸应该根据.base 这个元素的长宽而变化
  const outBox = document.querySelector('.base');
  const canvas = document.querySelector('#webgl');
  experience.value = new Experience(canvas, outBox);

});
onUnmounted(() => {
  experience.value.destroy()
})
</script>
<style lang="scss" scoped>
.base {
  width: 100%;
  height: 100%;
  background-color: #54ccfc;
  position: relative;

  .color_pannel {
    position: absolute;
    right: 100px;
    bottom: 0;
    z-index: 10;
    padding: 10px;
    // background: #fff;
    color: #fff;
    @include flex(column, flex-start, flex-start);

    .color_item {
      // width: 100px;
      @include flex(row, flex-start, center);
      font-size: 12px;
      margin-bottom: 10px;

      .color_block {
        width: 20px;
        height: 20px;
        margin-right: 10px;
      }
    }
  }

  .color_station_pannel {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 10;
    padding: 10px;
    // background: #fff;
    color: #fff;
    @include flex(column, flex-start, flex-start);

    .color_item {
      // width: 100px;
      @include flex(row, flex-start, center);
      font-size: 12px;
      margin-bottom: 10px;

      .color_block {
        width: 20px;
        height: 20px;
        margin-right: 10px;
      }
    }
  }

  #webgl {
    width: 100%;
    height: 100%;
  }
}
</style>